<template>
<!--添加开平信息-->
  <div>
    <div class="kaiping-box">
      <div class="kaiping-box-head">
      <div style="display: flex;padding-left: 10px;padding-top: 11px" >
        <a  href="#">
          <div style="display: flex" @click="backForFirst" >
            <i class="icon-cangkuchaxunguanli" style="margin-top: 4px;margin-right: 5px;margin-left: 5px"></i>
            <h3>开平订单选择原料(卷板库存查询)</h3>
          </div>
        </a>
         </div>

        <div style="position: absolute;right: 15px;top:10px;display: flex">
          <h4 style="margin-top: 5px"> 条件&nbsp;:&nbsp;&nbsp;</h4>
          <el-select size="small" style="width: 150px;margin-right: 10px" v-model="selectMsg.warehouseId" placeholder="请选择">
            <el-option
              v-for="item in wareHouseList"
              :key="item.warehouseId"
              :label="item.warehouseName"
              :value="item.warehouseId">
            </el-option>
          </el-select>
          <el-select size="small" style="width: 150px;margin-right: 10px" v-model="selectMsg.smallTypeId" placeholder="请选择">
            <el-option
              v-for="item in smallTypeList"
              :key="item.small_type_id"
              :label="item.small_type_name"
              :value="item.small_type_id">
            </el-option>
          </el-select>
          <h4 style="margin-top: 5px"> 实际厚度&nbsp;:&nbsp;&nbsp;</h4>
          <el-input v-model="selectMsg.thickness"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable size="small" style="width: 120px;margin-right: 10px" ></el-input>
          <h4 style="margin-top: 5px"> 重量(kg)&nbsp;:&nbsp;&nbsp;</h4>
          <el-input v-model="selectMsg.weight" size="small"  onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"  clearable style="width: 120px;margin-right: 10px" ></el-input>
          <el-button @click="changeSelectMsg" size="small" type="danger" icon="el-icon-search" circle></el-button>
        </div>
      </div>
      <div class="kaiping-box-main">
        <el-table
          v-loading="loading"
          element-loading-text="已经很努力加载了(•́へ•́╬)"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :data="dataList"
          height="500"
          border
          size="small"
          style="width: 100%">
          <el-table-column
           align="center"
            label="库存号"
           prop="inventory_id"
           >
          </el-table-column>
          <el-table-column
            label="卷板名称"
            align="center"
            >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.small_type_name}}</span>
              <span style="color: #ff3526;font-weight: bold;font-size: 14px">【{{scope.row.specification}}】</span>
            </template>
          </el-table-column>
          <el-table-column
            label="规格"
            align="center"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.long1}}*{{scope.row.wide}}</span>

            </template>
          </el-table-column>
          <el-table-column
            label="重量(单卷)"
            align="center"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.weight}} &nbsp;KG</span>
            </template>
          </el-table-column>
          <el-table-column
            label="数量"
            align="center"
          >
            <template slot-scope="scope">
              <span style="font-weight: bold;font-size: 14px">{{scope.row.quantity}} &nbsp;卷</span>
            </template>
          </el-table-column>
          <el-table-column
            label="开平管理"
            align="center"
          >
            <template slot-scope="scope">
              <el-button @click="addKaiPingOrder(scope.row)" size="mini" type="success" icon="icon-jiagong-hei">&nbsp;将此开平</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 20px"
          background
          align="center"
          :page-size="pageSize"
          :current-page="current"
          layout="prev, pager, next"
          @current-change="changePage"
          :total=total>
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
import {get} from "../../utils/request";
import {KAI_PING_SHOW_RAW_DATA} from "../../utils/basic-data";

export default {
  name: "KaipingMsg",
  data(){
    return{
      loading:true,
      total:0,
      pageSize:KAI_PING_SHOW_RAW_DATA,
      current:1,
      dataList:[],
      wareHouseList:[],
      smallTypeList:[],
      selectMsg:{
        warehouseId:null,
        smallTypeId:null,
        thickness:null,
        weight:null,
      }
    }
  },
  created() {
this.current=1
  },
  mounted() {

    get('/api/v1/small-type-show',{bigTypeId:2}).then(resp=>{
      this.smallTypeList=resp.data
      this.smallTypeList.unshift({small_type_id: 0,small_type_name:'所有卷板'})
      this.selectMsg.smallTypeId=0
    })

    get('/api/v1/warehouse/show/select').then(resp=>{
      this.wareHouseList=resp.data
      this.wareHouseList.unshift({warehouseId: 0,warehouseName:'所有库房'})
      this.selectMsg.warehouseId=0
    })

    get("/api/v1/inventory/kaiping",{pageSize:this.pageSize,currentPage:this.current,smallTypeId: 0,warehouseId: 0,thickness: this.selectMsg.thickness,weight: this.selectMsg.weight}).then(resp=>{
      this.dataList=resp.data.objectList
      this.current=resp.data.currentPage
      this.total=resp.data.total
      this.loading=false
    })
  },
  methods:{
    addKaiPingOrder(value){
      this.$router.push({name:'KaiPingOrder',params:{inventoryId:value.inventory_id,smallTypeId:value.small_type_id,quantity:value.quantity}})
    },
    backForFirst(){
      this.loading=true
      this.selectMsg.smallTypeId=0
      this.selectMsg.warehouseId=0
      this.selectMsg.thickness=null
      this.selectMsg.weight=null
      this.changePage(1)
    },
    changePage(value){
      this.loading=true
      get("/api/v1/inventory/kaiping",{pageSize:this.pageSize,currentPage:value,smallTypeId: this.selectMsg.smallTypeId,warehouseId: this.selectMsg.warehouseId,thickness: this.selectMsg.thickness,weight: this.selectMsg.weight}).then(resp=>{
        this.dataList=resp.data.objectList
        this.current=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })
    },
    changeSelectMsg(){
      this.loading=true
      this.current=1
      get("/api/v1/inventory/kaiping",{pageSize:this.pageSize,currentPage:this.current,smallTypeId: this.selectMsg.smallTypeId,warehouseId: this.selectMsg.warehouseId,thickness: this.selectMsg.thickness,weight: this.selectMsg.weight}).then(resp=>{
        this.dataList=resp.data.objectList
        this.current=resp.data.currenPage
        this.total=resp.data.total
        this.loading=false
      })
    }
  }
}
</script>

<style scoped>
.kaiping-box-main{
  background-color: #f2f2f2;
  height: 590px;
  width: 1270px;
  margin-left: 10px;
  padding-top: 20px;
  border-radius: 20px;
}
a{
  text-decoration: none;
  color: #2c3e50;
}
h4{margin: 0}
h3{
  margin: 0;
}
.kaiping-box-head{
  width: 100%;
  height: 45px;
  position: relative;

  /*background-color: #ff3526;*/
}
.kaiping-box{
  height: 674px;
  margin-top: 10px;
  width: 1290px;
  background-color: white;
  border-radius: 30px;
  box-shadow:  20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
}
</style>
